function Page(el,options={}){
    // 保存数据
    this.el=document.querySelector(el)
    this.options=options
    // 初始化
    this.init()
}

Page.prototype.init=function(){
    // 功能
    // 创建p标签
    this.creatTag()
    // 创建分页页码
    // this.creatNum()
    // this.creatLabel()
    // 绑定点击事件
    this.bindEvent()
}
// 创建分页p标签
Page.prototype.creatTag=function()
{
    // 清空
    this.el.innerHTML=''
    let pageTag=this.options.pageTag
    //  console.log(pageTag)
    for (let key in pageTag) 
    {
        this.creatLable('p',pageTag[key],this.el)
        // let pObj = document.createElement('p')
        // pObj.innerText = pageTag[key]
        // // pObj.style.border = '1px solid black'
        // pObj.style.margin = '0 5px'
        // pObj.style.padding = '0 5px'
        // pObj.style.display = 'inline-block'

        // this.el.appendChild(pObj)
    }
    this.creatNum()
}

// 创建页码
Page.prototype.creatNum=function()
{
    // 获取第三个list:null标签
    let tag3=document.querySelector('p:nth-child(3)')
    // for循环创建5个分页
    // 算法添加页码
    let pageNum=this.options.pageInfo.pageNum
    this.options.pageInfo.totalpage=Math.ceil(this.options.pageInfo.totalData/this.options.pageInfo.pageSize)
    let totalpage=this.options.pageInfo.totalpage
    //     // 1 2 3 4 5 6 7 ... 99 100  pageNum<=5
    //     // 1 2 ...4 5 6 7 8...99 100  pageNum>5  pageNum<96
    //     // 1 2 ...96 97 98 99 100    pageNum>96
    if(totalpage<10){
        for(let i=1;i<totalpage;i++){
            this.creatLable('p',i,tag3) 
            // console.log(totalPage)
        }
        
    }else if(pageNum<5){
            for(let i=1;i<=5;i++){
                this.creatLable('p',i,tag3)
            }
            this.creatLable('p','...',tag3)
            this.creatLable('p',totalpage-1,tag3)
            this.creatLable('p',totalpage,tag3) 
        }else  if( pageNum==5){
            for(let i=1;i<=7;i++){
                this.creatLable('p',i,tag3)
            }
            this.creatLable('p','...',tag3)
            this.creatLable('p',totalpage-1,tag3)
            this.creatLable('p',totalpage,tag3)
        }else if( pageNum>5 && pageNum<totalpage-4){
            for(let i=1;i<=2;i++){
                this.creatLable('p',i,tag3)
            }
                this.creatLable('p','...',tag3)
                this.creatLable('p',pageNum-2,tag3)
                this.creatLable('p',pageNum-1,tag3)
                this.creatLable('p',pageNum,tag3)
                this.creatLable('p',pageNum+1,tag3)
                this.creatLable('p',pageNum+2,tag3)
                this.creatLable('p','...',tag3)
                this.creatLable('p',totalpage-1,tag3)
                this.creatLable('p',totalpage,tag3)
        }else if(pageNum=totalpage-4){
            for(let i=1;i<=2;i++){
                this.creatLable('p',i,tag3)
            }
            this.creatLable('p','...',tag3)
            this.creatLable('p',pageNum-2,tag3)
            this.creatLable('p',pageNum-1,tag3)
            this.creatLable('p',pageNum,tag3)
            this.creatLable('p',pageNum+1,tag3)
            this.creatLable('p',pageNum+2,tag3)
            this.creatLable('p',totalpage-1,tag3)
            this.creatLable('p',totalpage,tag3)

        }
}

//     for(let i=1;i<6;i++)
//     {
//        this.creatLable('p',i,tags)
//         // let pObj = document.createElement('p')
//         // pObj.innerText = i
//         // // pObj.style.border = '1px solid black'
//         // pObj.style.margin = '0 15px'
//         // pObj.style.padding = '0 15px'
//         // pObj.style.display = 'inline-block'
//         // 选中思路：content === 当前页  就选中
//         // if (i== this.options.pageInfo.pageNum) {
//         //     pObj.style.background = '#29d'
//         //     pObj.style.color = '#fff'
//         //     pObj.style.width = '20px'
//         //     pObj.style.height = '20px'
//         //     pObj.style.lineHeight = '20px'
//         //     pObj.style.textAlign = 'center'
//         //     pObj.style.margin = '5px'
//         //     pObj.style.padding = '5px'
//         // }
//         //追加到页面
//         // tags.appendChild(pObj)
//     }

// }

// 创建标签和创建页码，代码冗余，封装 后期调用
Page.prototype.creatLable=function(tagName,content,parent)
{
    let pObj = document.createElement(tagName)
    pObj.innerText = content
    // pObj.style.border = '1px solid black'
    pObj.style.margin = '0 5px'
    pObj.style.padding = '0 5px'
    pObj.style.display = 'inline-block'
    // 默认选中
    // 选中思路：content === 当前页  就选中
    if (content== this.options.pageInfo.pageNum) 
    {
        pObj.style.background = 'orange'
        // pObj.style.background = '#29d'
        pObj.style.color = '#fff'
        pObj.style.width = '20px'
        pObj.style.height = '20px'
        pObj.style.lineHeight = '20px'
        pObj.style.textAlign = 'center'
        pObj.style.margin = '5px'
        pObj.style.padding = '5px'
    }
    // 追加到页面
    parent.appendChild(pObj)
}


// // 绑定点击事件
Page.prototype.bindEvent=function(){
    // 获取当前盒子，绑定点击事件
    this.el.onclick=(e)=>{
        // 获取事件对象
        let evt=e ||  window.event
        // 获取操作标签对象
        let target=e.target  || evtent.srcElement
        if(target.nodeName==='P'){
            switch(target.innerText){
                 // 判断是否点击的是首页=第一页
                case  this.options.pageTag.first:
                    this.options.pageInfo.pageNum=1
                    break;
                // 判断点击的是否是尾页
                case  this.options.pageTag.last:
                    this.options.pageInfo.pageNum=this.options.pageInfo.totalPage
                    break;
                // 判断上一页 prev pagenum--
                case  this.options.pageTag.prev:
                    if(this.options.pageInfo.pageNum==1)  return
                    this.options.pageInfo.pageNum--
                        break;
                 // 判断下一页 prev pagenum--
                 case  this.options.pageTag.next:
                    if(this.options.pageInfo.pageNum==this.options.pageInfo.totalPage)  return
                    this.options.pageInfo.pageNum++
                        break;
                default:
                    if(parseInt(target.innerHTML)>0){
                        this.options.pageInfo.pageNum=parseInt(target.innerHTML)
                    }
                        break;
            }
            this.creatTag()
        }
    }
}